<template>
  <!-- 弹框 -->
  <el-dialog :title="formData.id?'编辑班级':'新增班级'" :visible.sync="dialogVisible">
    <!-- 表单 -->

    <el-form
      ref="formData"
      :rules="rules"
      class="demo-table-expand"
      :model="formData"
    >
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="归属学科" prop="subject_id">
              <el-select v-model="formData.subject_id" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="班级名称" prop="class_name">
              <el-input
                v-model="formData.class_name"
                placeholder="请输入班级名称"
                style="width:65%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="授课老师">
              <el-select v-model="formData.teacher_info" multiple placeholder="请选择">
                <el-option
                  v-for="item in list"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="助教老师">
              <el-select v-model="formData.zhujiao_info" multiple placeholder="请选择">
                <el-option
                  v-for="item in zhuTeacer"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="班主任老师">
              <el-select v-model="formData.manager_info" multiple placeholder="请选择">
                <el-option
                  v-for="item in banTeacher"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开课结课日期">
              <el-date-picker
                v-model="formData.value"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分割线 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input-number
                v-model="formData.sort"
                :min="1"
                :max="10"
                label="描述文字"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" 班级状态">
              <el-switch
                v-model="formData.state"
                :active-value="1"
                :inactive-value="2"
                active-text="正常"
                inactive-text="关闭"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="btnCanceled">取 消</el-button>
      <el-button type="primary" @click="btnOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getTreeList,
  teacher,
  teacherZhu,
  teacherBan,
  addSubjectClasss

} from '@/api/class'
export default {
  name: 'AddClass',
  // props: {
  //   dialogVisible: {
  //     type: Boolean,
  //     required: true
  //   }
  // },
  data() {
    return {
      value1: '',
      formInline: {
        user: '',
        region: '',
        tiuu: ''
      },

      // 计数器
      num: 1,
      dialogVisible: false,
      formData: {
        subject_id: '', // 归属学科
        class_name: '', // 班级名称
        teacher_info: '', // 授课老师
        zhujiao_info: '', // 助教老师
        manager_info: '', // 班主任老师
        sort: null, // 排序
        state: null, // 1开启,2是关闭
        value: [this.start_time, this.end_time]
      },
      start_time: '', // 开始时间
      end_time: '', // 结束时间
      options: [],
      list: [], // 接受老师的信息
      zhuTeacer: [], // 助教的信息
      banTeacher: [], // 班主任的信息
      // v-for用来循环的空数组

      laoshi: [],
      zhujiao: [],
      banzhuren: [],
      // 日期
      value3: '',
      // 班级状态
      value2: '',
      // 验证规则
      rules: {
        class_name: [
          { required: true, trigger: 'blur', message: '请输入班级名称' }
        ],
        subject_id: [{ required: true, trigger: 'blur', message: '选择学科' }]
      }
      // lists: {
      //   page: 1,
      //   limit: 10
      // }
    }
  },
  created() {
    //  调用学科列表接口
    this.getTreeList()
    // 调用老师接口
    this.teacher()
    // 助教老师接口
    this.teacherZhu()
    // 调用班主任信息接口
    this.teacherBan()
  },
  methods: {
    // 发送获取学科请求
    async getTreeList() {
      // 解构
      const { data } = await getTreeList()
      console.log(data)
      // 将解构的数据赋值给需要循环的空数组
      this.options = data
    },
    // async postStatus() {
    //   console.log(postStatus)
    // }
    handleChange(value) {
      console.log(value)
    },
    // 老师信息接口
    async teacher() {
      const { data } = await teacher({ role_name: '讲师' })
      this.list = data
    },
    // 助教信息接口
    async teacherZhu() {
      const { data } = await teacherZhu({ role_name: '助教' })
      console.log(data)
      this.zhuTeacer = data
    },
    // 班主任信息接口
    async teacherBan() {
      const { data } = await teacherBan({ role_name: '班主任' })
      this.banTeacher = data
    },
    btnCanceled() {
      // 关闭弹层
      this.dialogVisible = false
      // 取消清空v-for的数组
      // this.laoshi = []
      // this.zhujiao = []
      // this.banTeache = []
      //
    },
    // 确定添加按钮
    async btnOk() {
      try {
        await addSubjectClasss({
          start_time: this.formData.value[0],
          end_time: this.formData.value[1],
          // manager_info: JSON.stringify([{ username: this.formData.manager_info[0] }]),
          manager_info: [{ username: this.formData.manager_info[0], user_id: '1' }],
          sort: this.formData.sort,
          state: this.formData.state,
          subject_id: this.formData.subject_id,
          // teacher_info: JSON.stringify([{ username: this.formData.teacher_info[0] }]),
          teacher_info: [{ username: this.formData.teacher_info[0], user_id: '1' }],
          zhujiao_info: [{ username: this.formData.zhujiao_info[0], user_id: '1' }],
          class_name: this.formData.class_name

        })
        this.$message.success('添加成功')
        // 关闭弹层
        this.dialogVisible = false
        // 重新拉取数据
        // this.$parent.getClassList()
        // 自定义事件通知父级关闭弹出层
        this.$emit('fn')
        // 清空表单
        this.formData = {
          subject_id: '', // 归属学科
          class_name: '', // 班级名称
          teacher_info: '', // 授课老师
          zhujiao_info: '', // 助教老师
          manager_info: '', // 班主任老师
          sort: null, // 排序
          state: null, // 1开启,2是关闭
          value: [this.start_time, this.end_time]
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style></style>
